<!-- 游戏记录 -->
<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @changeTh="data.dialogVisible = true" @sort="sortTable"
    :resetShow="true" @reset="onHideDetails(true)">
    <template #form>
      <GameItem ref="GameItemRef" @query="queryGame" />
      <el-form-item :label="t('588')+'：'">
        <el-select v-model="data.query.small_game_type" :placeholder="$t('340')" filterable>
          <el-option :label="$t('21')" :value="-1" />
          <el-option v-for="item in data.gameTypeList" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-select class="selectWidth120" v-model="data.query.search_type" :placeholder="$t('340')">
          <el-option v-for="item in USERCEXT" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input class="width180" v-model="data.query.search_value" :placeholder="$t('19')" />
      </el-form-item>
      <el-form-item :label="$t('40')">
        <el-input v-model="data.query.round_id_str" :placeholder="$t('19')" />
      </el-form-item>
      <el-form-item :label="$t('39')">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" :start-placeholder="$t('26')"
          :end-placeholder="$t('27')" value-format="YYYY-MM-DD" :disabled-date="indexStore.disabledDateTime"/>
      </el-form-item>
    </template>
    <template #button></template>
    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          show-overflow-tooltip :sortable="item.sortable ? 'custom' : false">
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content>
                <div v-html="item.tips"></div>
              </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'round_id_str'" #default="scope">
            <span class="item_check" @click="checkUser(scope.row.round_id_str, 3)">
              {{ scope.row.round_id_str }}
            </span>
          </template>
          <template v-if="item.prop == 'account_id'" #default="scope">
            <span class="item_check" @click="checkUser(scope.row.account_id, 1)">
              {{ scope.row.account_id }}
            </span>
          </template>
          <template v-if="item.prop == 'account'" #default="scope">
            <span class="item_details" @click="data.checkedItem = scope.row,data.isUserDetails = true">
              {{ scope.row.account }}
            </span>
          </template>
          <template v-if="item.prop == 'game_id'" #default="scope">
            <GameHeaderInfo :game_id="scope.row.game_id"/>
          </template>
          <template v-if="item.prop == 'game_type'" #default="scope">
            <el-tag>{{ selectToLabel(GAMETYPE, scope.row.game_type) }}</el-tag>
          </template>
          <template v-if="item.prop == 'fee'" #default="scope">
            <span :class="colorClass(scope.row.fee)">{{ BigWan(scope.row.fee) }}</span>
          </template>
          <template v-if="item.prop == 'game_mini'" #default="scope">
            <el-tag>{{ scope.row.small_game_type?selectToLabel(data.gameTypeList,scope.row.small_game_type):'-'}}</el-tag>
          </template>
          <template v-if="item.prop == 'pig_state'" #default="scope">
            <el-tag :type="scope.row.pig_state?'success':'danger'">{{ selectToLabel(data.stateList, scope.row.pig_state) }}</el-tag>
          </template>
          <template v-if="item.prop == 'use_rtp'" #default="scope">
            {{ scope.row.use_rtp?BigHundred(scope.row.use_rtp)+'%':'-' }}
          </template>
          <template v-if="item.prop == 'small_win'" #default="scope">
            <span :class="colorClass(scope.row.small_win)">{{ BigWan(scope.row.small_win) }}</span>
          </template>
          <template v-if="item.prop == 'enter_money'" #default="scope">
            <span :class="colorClass(scope.row.enter_money)">{{ BigWan(scope.row.enter_money) }}</span>
          </template>
          <template v-if="item.prop == 'bet'" #default="scope">
            <span class="colorText">{{ BigWan(scope.row.bet) }}</span>
          </template>
          <template v-if="item.prop == 'after_settlement_money'" #default="scope">
            <span :class="colorClass(scope.row.after_settlement_money)">{{ BigWan(scope.row.after_settlement_money) }}</span>
          </template>
          <template v-if="item.prop == 'win_lose'" #default="scope">
            <span :class="colorClass(BigMinus(BigWan(scope.row.win),BigWan(scope.row.bet)))">
              {{ BigMinus(BigWan(scope.row.win),BigWan(scope.row.bet)) }}
            </span>
          </template>
          <template v-if="item.prop == 'save_time_stamp'" #default="scope">
            {{ setTimestampTime(scope.row.save_time_stamp) }}
          </template>
        </el-table-column>
      </template>
      <el-table-column fixed="right" :label="t('46')" width="100">
        <template #header>
          <el-tooltip effect="dark" :content="$t('316')" placement="top">
            <el-icon class="ques-tips">
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
          {{ $t('46') }}
        </template>
        <template #default="scope">
          <el-button :disabled="GamePlatformDisabled(indexStore.gameArray,scope.row.game_id)" :type="GamePlatformDisabled(indexStore.gameArray,scope.row.game_id)?'info':'primary'" size="small" @click="checkDetails(scope.row)">
            {{ $t('47') }}
          </el-button>
        </template>
      </el-table-column>
    </template>
  </SearchTable>

  <!-- 游戏详情 -->
  <GameDetail :show="data.isShowDetails" :checkedItem="data.checkedItem" @onHideDetails="onHideDetails">
  </GameDetail>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>

  <!-- 玩家信息详情 -->
  <UserDetails :show="data.isUserDetails" @onHideDetails="onHideDetails" :checkedItem="data.checkedItem" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import UserDetails from '@/views/users/components/user-details.vue'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import GameItem, { type GameType } from '@/components/FormItem/GameItem.vue'
import GameDetail from './gameDetail.vue'
import { getDateDay, setTimeValue, isOneDay,setTimestampTime } from '@/utils/time'
import { BigWan, BigMinus, BigHundred } from '@/utils/math'
import { GAMETYPE, USERCEXT } from '@/config/eunm'
import { selectToLabel,colorClass,GamePlatformDisabled } from '@/utils/index'
import { getGameLogList } from '@/api/user'

import { useStore } from '@/stores/index'
const indexStore = useStore()
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

interface InfoType {
  label: string
  value: any
  key: string
}

const data = reactive({
  query: {
    start_time: 0, // 开始时间
    end_time: 0, // 结束时间
    date: [getDateDay(0), getDateDay(0)],
    search_type: 1, // 1是平台id 2玩家昵称 3平台名称
    search_value: '', // 搜索的值
    small_game_type: -1,
    game_id: -1, // 游戏
    platform: -1, // 品牌
    round_id_str: '', // 牌局编号
    order_field: '', // 排序字段
    order_value: '', // 排序方式 asc升序  desc 倒序
    page: 1,
    size: 50
  },
  list: [],
  total: 0,
  fields: [
    // bet 前余额-下注+赢-手续费   win  赢的钱- 下注
    { label: t('39'), prop: 'save_time_stamp', width: '180', visible: true, tips: t('315') },
    { label: t('40'), prop: 'round_id_str', width: '200', visible: true, tips: t('311') },
    { label: t('17'), prop: 'account_id', width: '120', visible: true, tips: t('289') },
    { label: t('18'), prop: 'account', width: '150', visible: true, tips: t('290') },
    { label: t('41'), prop: 'game_id', width: '180', visible: true, tips: t('541') },
    { label: t('62'), prop: 'game_type', width: '110', visible: true, tips: t('542') },
    { label: t('588'), prop: 'game_mini', width: '120', visible: true, tips: t('543') },
    // { label: t('988'), prop: 'pig_state', width: '120', tips: t('990') },
    // { label: t('989'), prop: 'use_rtp', width: '175', tips: t('991') },
    { label: t('45'), prop: 'win_lose', width: '180', visible: true, tips: t('314', { br: '<br>' }), sortable: true },
    { label: t('42'), prop: 'enter_money', width: '180', visible: true, tips: t('312') },
    { label: t('43'), prop: 'after_settlement_money', width: '180', visible: true, tips: t('313'), sortable: true },
    { label: t('44'), prop: 'bet', width: '180', visible: true, tips: t('306'), sortable: true },
  ],
  listDetails: [],
  dialogVisible: false,
  isShowDetails: false,
  isUserDetails: false,
  filArr: [] as InfoType[], // 飞机游戏的内容
  checkedItem: {} as { game_id: number, log_details_id: number }, // 当前数据
  obj: {} as any,
  gameTypeList: [
    { label: t('529'), value: 1 },
    { label: t('526'), value: 2 },
    { label: t('589'), value: 3 },
  ],
  stateList: [
    { label: t('986'), value: 0 },
    { label: t('987'), value: 1 }
  ],
})

// 游戏品牌 + 游戏
const queryGame = (item: GameType) => {
  data.query.platform = item.platform
  data.query.game_id = item.game_id
}

onMounted(async () => {
  getSearchList()
})

// 查询列表
const getSearchList = async () => {
  indexStore.setPageLoading(true)
  data.query = setTimeValue(data.query)
  let res = await getGameLogList(data.query)
  indexStore.setPageLoading(false)
  data.list = res.data.list ?? []
  data.total = res.data.total
}

// 表格排序
const sortTable = async (s: { column: any, prop: string, order: string }) => {
  if (isOneDay(data.query.date)) {
    switch (s.prop) {
      case 'after_settlement_money':
        data.query.order_field = 'after_settlement_money';
        break
      case 'bet':
        data.query.order_field = 'bet';
        break
      case 'win_lose':
        data.query.order_field = 'win_lose';
        break
    }
    data.query.order_value = s.order
    getSearchList()
  } else {
    ElMessage.warning({
      message: t('372')
    })
  }
}

// 点击商户id 修改名称
const checkUser = (val: string, type: number) => {
  if (type == 3) {
    data.query.round_id_str =val
  } else{
    data.query.search_type = type
    data.query.search_value = val
  }
  getSearchList()
}

// 查看详情
const checkDetails = async (row: any) => {
  data.checkedItem = row
  data.isShowDetails = true;
}

// 修改页数
const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}
const changeSize = (val: number) => {
  data.query.size = val
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}
// 重置
const GameItemRef = ref<any>()
const onHideDetails = (show: boolean) => {
  data.dialogVisible = false
  data.isUserDetails = false
  data.filArr = {} as InfoType[]
  data.checkedItem = {} as { game_id: number, log_details_id: number }
  data.obj = {} as any
  if(data.isShowDetails){
    data.isShowDetails = false
  }
  if (show) {
    data.query = {
      start_time: 0, // 开始时间
      end_time: 0, // 结束时间
      date: [getDateDay(0), getDateDay(0)],
      search_type: 1, // 1是平台id 2玩家昵称 3平台名称
      search_value: '', // 搜索的值
      small_game_type: -1,
      game_id: -1, // 游戏
      platform: -1, // 品牌
      round_id_str: '', // 牌局编号
      order_field: '', // 排序字段
      order_value: '', // 排序方式 asc升序  desc 倒序
      page: 1,
      size: 50
    }
    GameItemRef.value.onHideDetails()
    getSearchList()
  }
}
</script>

<style scoped lang="scss"></style>
